<template>
  <div class="product-card" @click="handleCardClick(product.id)">
    <img :src="product.prodPicture" alt="商品图片" class="product-image" />
    <h2 class="product-name">{{ product.prodName }}</h2>
    <p class="product-description">{{ product.prodCaption }}</p>
    <p class="product-price">价格: ¥{{ product.prodPrice }}</p>
  </div>
</template>

<script>
//import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import defalutImage from '../../../assets/default.jpg';

export default {
  name: 'ProductCard',
  props: {
    product: {
      type: Object,
      required: true,
    },
  },

  setup(props) {
    const router = useRouter();

    onMounted(() => {
      if(props.product.prodPicture === null) {
        props.product.prodPicture = defalutImage;
      }
    })

    const handleCardClick = (id) => {
      router.push({ 
        path: '/customer/shop/purchase', 
        query: { 
          productId: id
        }
      });
    };

    return {
      handleCardClick,
    };
  },
};
</script>

<style src="../../../assets/styles/cusProdCard.css" scoped></style>